<template>
  <view class="page">
    <!-- 注意： App 网页向应用 postMessage 为实时消息 -->
    <web-view v-if="vdata.url" :src="vdata.url" @message="onMessageFunc"></web-view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, toRaw, provide, nextTick } from "vue"
import { onLoad, onShow } from "@dcloudio/uni-app"
import appConfig from "@/config/appConfig.js"
import storageManage from "@/util/storageManage.js"

const vdata = reactive({
  url: null,
})

onLoad((option) => {
  let jeepayToken = storageManage.token()
  let uploadImgSize = storageManage.uploadImgSize() || ''
  let isView = false // 是否预览模式

  let baseUrl = `${appConfig.env.JEEPAY_BASE_URL}`

  vdata.url = `${baseUrl}/h5MchApplymentOption?configPage=${option.configPage}&jeepayToken=${jeepayToken}&applyId=${option.applyId}&uploadImgSize=${uploadImgSize}`
})

// App 网页向应用 postMessage 为实时消息
// 接收到 web-view事件 ,
// 注意：放置数据， 必须在data字段下，  比如： uni.postMessage({data: {ctrl: 'TOTOTOTOTOT'}})
function onMessageFunc(msg) {
  // 接收到响应的数据 [数组格式， 比如接收到 web-view的返回等特定事件， 将数据入栈全部返回 ]
  let postDataArray = msg.detail.data

  // 无数据
  if (!postDataArray || !Array.isArray(postDataArray)) {
    return false
  }
}
</script>

<style lang="scss" scoped>
@import "./static/information.scss";
.page {
  padding: 30rpx;
  box-sizing: border-box;
  padding-bottom: 150rpx;
  background-color: #f5f6fd;
  min-height: calc(100vh - 0px);
}
.box {
  border-radius: 10px;
  overflow: hidden;
  padding-bottom: 10px;
  background-color: #fff;
}
.mch-title {
  font-weight: bold;
  font-size: 28rpx;
  color: #3981ff;
}
.mch-type {
  display: flex;
  align-items: center;
  image {
    margin-left: 10px;
    height: 20rpx;
    width: 20rpx;
  }
}

.btn-area {
  position: relative;
  z-index: 20;
  box-sizing: border-box;
  width: 100%;
  background: #fff;
  // background: linear-gradient(transparent,#fff 85%);
  padding: 10rpx 30rpx 30rpx;
  display: flex;
  position: fixed;
  bottom: 1rpx;
  left: 0;
  justify-content: space-between;

  .read {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    height: 90rpx;
    border: 1rpx solid #c5c7cc;
    border-radius: 10rpx;
    background: #fff;
    font-weight: 500;
    font-size: 30rpx;
    letter-spacing: 0.07em;
    color: #808080;
  }
}
.submit {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 150rpx;
  width: 380rpx;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 10rpx;
  background: #3981ff;
  font-weight: 500;
  font-size: 30rpx;
  color: #fff;
}
</style>
